<template>
  <div>
    <div v-if="flag">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <Row justify="space-between">
          <Col span="6">
            <FormItem label="仓库编号" prop="sid">
              <Input
                v-model="formValidate.sid"
                placeholder="输入仓库编号"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库名称" prop="name">
              <Input v-model="formValidate.name" placeholder="仓库名称"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库位置" prop="position">
              <Input
                v-model="formValidate.position"
                placeholder="仓库位置"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row justify="space-between">
          <Col span="6">
            <FormItem label="仓库容积" prop="tv">
              <InputNumber :min="1" v-model="formValidate.tv"></InputNumber>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="仓库类型" prop="type">
              <Select v-model="formValidate.type" placeholder="选择仓库类型">
                <Option value="一般仓库">一般仓库</Option>
                <Option value="临期仓库">临期仓库</Option>
                <Option value="安全仓库">安全仓库</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="修建时间" prop="builddate">
              <DatePicker
                type="date"
                placeholder="选择时间"
                v-model="formValidate.builddate"
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')"
            >提交</Button
          >
          <Button @click="handleReset('formValidate')" style="margin-left: 8px"
            >重置</Button
          >
          <Button type="error" @click="flag = false" style="margin-left: 8px"
            >取消</Button
          >
        </FormItem>
      </Form>
    </div>
    <div v-else>
      <Form ref="formInline" :model="formInline" inline>
        <FormItem prop="cid">
          <Input type="text" v-model="formInline.sid" placeholder="仓库号">
            <Icon type="md-rose" slot="prepend" />
          </Input>
        </FormItem>
        <FormItem prop="name">
          <Input type="text" v-model="formInline.name" placeholder="仓库名">
            <Icon type="ios-rose" slot="prepend" />
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch">搜索</Button>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="flag = true">添加</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      formInline: {
        sid: "",
        name: "",
      },
      formValidate: {
        sid: "",
        name: "",
        tv: "",
        position: "",
        builddate: "",
        type: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "请输入仓库名称",
            trigger: "blur",
          },
        ],
        position: [
          {
            required: true,
            message: "请输入仓库位置",
            trigger: "blur",
          },
        ],
        builddate: [
          {
            required: true,
            type: "date",
            message: "选择修建时间",
            trigger: "change",
          },
        ],

        sid: [
          {
            required: true,
            type: "string",
            message: "请选择仓库",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            type: "string",
            message: "请选择仓库类型",
            trigger: "change",
          },
        ],
        tv: [
          {
            required: true,
            message: "请输入正确的数量",
            trigger: "blur",
            type: "number",
          },
        ],
      },
    };
  },

  mounted() {
    //   this.axios.get('/api/store').then(r => {
    // 			this.data1 = r.data
    // 			this.loading = false
    // 		}).catch(e => {
    // 			this.$Message.error("e" + e)
    // 		})
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success("Success!");
          this.$emit("adds",this.formValidate)
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSearch(){
      this.$emit('search',this.formInline)
    }
  },
};
</script>
